<template>
  <ul class="flex gc-4 tabs">
    <li
      v-for="(item, key) in tabs"
      :key="key"
      :class="{ active: item.title === currentTab?.title }"
      @click="selectItem(item)"
      >{{ item.title }}
    </li>
  </ul>
</template>

<script setup lang="ts">
  import { tabs, currentTab, Tab } from './bus';

  const selectItem = (item: Tab) => {
    currentTab.value = item;
  };
</script>

<style lang="scss" scoped>
  .tabs {
    li {
      padding: 4px 12px;
      border-radius: var(--radius);
      cursor: pointer;
      border: 1px solid transparent;
      color: #999;
      &:hover {
        color: #cc9b16;
      }
    }
    li.active {
      background-color: #ffd662;
      color: white;
    }
  }
</style>
